<template>
  <section class="box">
    <div class="logo"><img src="../common/images/login-logo.png" alt=""></div>
    <section class="register">
      <label>
        <span class="iconfont icon-user"></span>
        <input class="mobile" type="number" v-model="username" placeholder="请输入手机号">
      </label>
      <label style="display: relative">
        <span class="iconfont icon-yanzheng"></span>
        <input class="mobileyzm" type="number" v-model="yzm" placeholder="请输入手机验证码">
        <input @click="settime(this)" value="获取验证码" class="yzm code" readonly="readonly"/>
      </label>
      <label>
        <span class="iconfont icon-password"></span>
        <input class="newPwd" type="password" v-model="password" placeholder="请设置您的密码">
      </label>
      <p>
        <router-link to="/login" tag='a'>已有账号，快去登录吧！</router-link>
      </p>
      <span id="register-btn">注册</span>
    </section>
  </section>
</template>

<script>
  import axios from '../axios/axios'

  export default {
    name: 'register',
    data() {
      return {
        username: '',
        password: '',
        yzm: '',
      }
    },
    mounted: function () {

    },
    methods: {
      settime: function () {
        var data = JSON.stringify({
          "data": [this.username,
            "register"],
          "controllerName": "smsMessage",
          "actionName": "sendSmsMessage"
        });
        axios.postAdmain({
          data: data,
          callback: function (res) {
            console.log(res)
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .box {
    width: 100%;
    height: 100%;
    background-image: url('../common/images/login_bg.png');
    background-size: 100% 100%;
    .logo{
      width: 100%;
      padding: 20vw 0;
      text-align: center;
      img{
        width: 65%;
        height: auto;
      }
    }
    .register {
      position: absolute;
      top:50vw;
      z-index: 2;
      label {
        display: block;
        width: 96%;
        border-bottom: 1px solid #ddd;
        margin-top: 20px;
        padding-bottom: 4px;
        padding-left: 4vw;
        span {
          display: inline-block;
          font-size: 20px;
        }
        input {
          height: 36px;
          margin-left: 16px;
          background-color: rgba(0, 0, 0, 0);
          color: #000;
          outline: none;
          font-size: 16px;
        }
      }
      p{
        width: 100%;
        padding: 10px 15px 0;
        text-align: right;
        box-sizing: border-box;
        a{
          color: #545454;
        }
      }
      .yzm {
        position: absolute;
        display: block;
        height: 30px !important;
        width: 100px;
        background: #f04022;
        opacity: .8;
        color: #fff;
        text-align: center;
        line-height: 30px;
        border-radius: 8px;
        right: 10px;
        margin-top: -36px;
      }
      #register-btn {
        display: block;
        width: 92vw;
        height: 36px;
        margin: 0 4vw;
        background: linear-gradient(to right ,#f06a22, #f04022);
        border-radius: 5px;
        text-align: center;
        line-height: 36px;
        color: #FFFFFF;
        font-weight: 500;
        font-size: 18px;
        margin-top: 40px;
      }
    }
  }

</style>
